feat: AJAX uses token authentication by dcalhoun · Pull Request #181 · wordpress-mobile/GutenbergKit

dcalhoun · 2025-09-19T13:19:02Z

Authenticate AJAX requests with application passwords sent via an authorization header. Vendor wp-util.js and configure the WordPress AJAX and media globals.

Why?

The GutenbergKit editor does not have authorization cookies, so we must rely upon a different authorization mechanism. Additionally, GutenbergKit excludes core WordPress assets from the editor assets endpoint, so wp-util.js (which provides wp.ajax and wp.template) must be vendored and loaded directly.

Ref CMM-713. Close CMM-768.

How?

Set the Authorization header via jQuery.ajaxPrefilter and by overloading the window.wp.ajax utilities. This general-purpose AJAX auth is always initialized.
Vendor and load wp-util.js after jQuery and lodash are on window, since its IIFE captures jQuery via closure at execution time.
Filter the lodash-js-after inline script from editor assets. WordPress's _.noConflict() call wipes window._ because GutenbergKit doesn't load Underscore.js.
Alias wp.media.ajax and wp.media.post to the authenticated wp.ajax methods, since WordPress core's media-models.js is not loaded.
Conditionally initialize the VideoPress AJAX bridge when videopress/video is not in allowed_block_types, so core/video blocks extended to rely upon VideoPress upload services continue to work.
Derive the Android WebViewAssetLoader domain from siteURL so that the editor document shares the site's origin, making REST API and admin-ajax.php requests same-origin and eliminating CORS restrictions without server-side headers.
Fix the iOS demo app to use the home URL from the REST API response instead of url, which returns http:// for WordPress.com sites.

Testing Instructions

1. Verify AJAX requests use token authentication

make build
Run the demo app in Xcode/Android Studio (use production build, not dev server).
Open the editor for a site with an active Jetpack plugin connection (n.b., the demo app now supports WP.com sites).
Open the Safari/Chrome developer tools on your development machine and inspect the network requests for the iOS (Developer Tools menu)/Android (chrome://inspect) device.

Manually perform an AJAX request in the dev tools console via:

wp.ajax.send('videopress-get-upload-jwt')
  .done( ( response ) => console.log( 'Success:', response ) )
  .fail( ( error ) => console.error( 'Error:', error ) );

Verify the requests include the Authorization header with the token.
Verify a 200 response with an upload token in the body.

2. Verify VideoPress bridge continues functioning

make build
Run the demo app in Xcode/Android Studio (use production build, not dev server).
Open the editor for a site with an active Jetpack plugin connection (n.b., the demo app now supports WP.com sites).
Open the Safari/Chrome developer tools on your development machine and inspect the network requests for the iOS (Developer Tools menu)/Android (chrome://inspect) device.
Insert a Video block.
Attach media to the block via upload.
Verify the upload succeeds.
Verify the request relies upon the REST API, not admin-ajax.
Verify a 200 response with an upload token in the body.

Accessibility Testing Instructions

N/A, no navigation changes.

Screenshots or screencast

N/A, no visual changes.

dcalhoun · 2026-01-13T22:18:45Z

@claude

src/utils/ajax.js

android/Gutenberg/src/main/java/org/wordpress/gutenberg/model/EditorConfiguration.kt

src/utils/ajax.test.js

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

Include authorization header in AJAX requets, as we do not have cookies to send in the mobile app environment.

If we configure AJAX before loading the library, the configuration is overridden.

This global is often used by WordPress Admin page scripts.

Useful when needing to allow CORS for specific domains.

Address PR feedback about potential race condition. The code now checks if `window.wp.ajax.send` and `window.wp.ajax.post` are functions before wrapping them. This prevents TypeError when calling the wrapped function if the original method was undefined during configuration. Update tests to verify that missing methods remain undefined rather than being wrapped with an undefined reference. Co-authored-by: Claude <noreply@anthropic.com>

When `videopress/video` is not in `allowed_block_types`, initialize the VideoPress AJAX bridge to handle `core/video` blocks extended to rely upon VideoPress upload services. AJAX auth is always initialized. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

GutenbergKit excludes core WordPress assets from the editor assets endpoint, so wp-util.js (which provides wp.ajax and wp.template) must be vendored and loaded directly. Load it via dynamic import at the end of initializeWordPressGlobals() after jQuery and lodash are on window, since its IIFE captures jQuery via closure at execution time. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The wp.ajax.send and wp.ajax.post wrappers accepted a single options argument, but wp-util's implementation accepts (action, options). Align the wrapper signatures so the action argument is forwarded correctly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use `homeUrlString()` instead of `siteUrlString()` from the REST API root response. The `url` field often returns `http://` for WordPress.com sites, while `home` returns the actual public-facing `https://` URL. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

WordPress core sets these aliases in media-models.js, which GutenbergKit doesn't load. Alias them after auth wrapping so media uploads use the authenticated AJAX methods. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Avoid including latest changes from the WordPress/wordpress-develop repository.

Replace jQuery.ajaxSetup and wp.ajax.send/post wrappers with a single jQuery.ajaxPrefilter that only injects the Authorization header when the request URL starts with the configured siteURL. This prevents leaking credentials to cross-origin requests and avoids argument normalization issues with the previous wp.ajax wrapper approach. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Prevents double-slash in constructed URLs (e.g., `https://example.com//wp-admin/admin-ajax.php`) when siteURL is provided with a trailing slash. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…JAX auth The ajaxPrefilter silently no-ops via optional chaining when jQuery is missing, but the debug log still claims auth was configured. Guard with an early return and warning so the log accurately reflects what happened. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace `startsWith(siteURL)` with `URL.origin` comparison so that scheme, host, and port must all match exactly. This prevents credential leakage to lookalike domains (e.g. `https://example.com.evil.com`). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move the iOS and Android code examples out of the Android-specific requirement so they are not visually nested under that bullet point. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

configureAjax() now initializes wp.ajax, wp.ajax.settings, and the AJAX URL before the VideoPress bridge runs, making the duplicate setup in initializeVideoPressAjaxBridge() unnecessary. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Wrap `new URL(siteURL)` in try/catch so a malformed siteURL logs a warning instead of throwing. - Guard `configureMediaAjax` against missing `wp.ajax.send`/`post` (e.g., if wp-util.js failed to load). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Throw IllegalArgumentException if the value contains a scheme, path, or is blank, so callers get a clear error instead of a malformed asset URL at runtime. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Record the upstream commit hash and rationale for vendoring so future maintainers know where the file came from and when to update it. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Account.WpCom.username stores just the hostname (e.g., "dcpaid.wordpress.com") since it is extracted via URI.host during OAuth. ConfigurationItem was using this bare hostname as siteUrl, producing invalid AJAX endpoints. Prepend "https://" to match the self-hosted flow, which receives a full URL from the callback. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

dcalhoun · 2026-03-25T20:18:46Z

ios/Demo-iOS/Sources/Views/SitePreparationView.swift

        return EditorConfigurationBuilder(
            postType: selectedPostTypeDetails,
-            siteURL: URL(string: apiRoot.siteUrlString())!,
+            siteURL: URL(string: apiRoot.homeUrlString())!,


Ensures WP.com sites use TLS for the siteURL configuration in the demo app.

dcalhoun · 2026-03-25T20:21:20Z

src/utils/editor-environment.js

+	if ( ! allowedBlockTypes?.includes( 'videopress/video' ) ) {
+		// The VideoPress block isn't available, so initialize the bridge to handle
+		// any `core/video` blocks extended to rely upon VideoPress upload services.
+		initializeVideoPressAjaxBridge();
+	}


Retained to continue support for WP.com core/video blocks that are extended to rely upon VideoPress upload services. This can be removed in the future once videopress/video support is enabled and deemed stable.

dcalhoun · 2026-03-26T17:12:31Z

android/app/src/main/java/com/example/gutenbergkit/ConfigurationItem.kt

                    accountId = account.id,
                    name = account.username,
-                    siteUrl = account.username,
+                    siteUrl = "https://${account.username}",


The account.username is protocol-less, which causes errors as a GBK.siteURL value. It is safe to assume TLS for WP.com sites.

dcalhoun · 2026-03-26T17:13:24Z

src/utils/videopress-bridge.js

-	// Initialize wp.ajax if not already present
-	window.wp.ajax = window.wp.ajax || {};
-	window.wp.ajax.settings = window.wp.ajax.settings || {};
-
-	// Set up AJAX settings with site URL
-	const { siteURL } = getGBKit();
-	if ( siteURL ) {
-		window.wp.ajax.settings.url = `${ siteURL }/wp-admin/admin-ajax.php`;
-	}


Now redundant of the AJAX-specific configuration that runs before this bridge.

Derive the WebViewAssetLoader domain from the configured siteURL instead of defaulting to the synthetic appassets.androidplatform.net domain. This makes REST API and admin-ajax.php requests same-origin, eliminating CORS restrictions without requiring server-side headers. - Restrict shouldOverrideUrlLoading to /assets/ paths on the asset domain so arbitrary site pages don't load inside the WebView. - Reorder shouldInterceptRequest to check the cache interceptor before the asset loader, preventing cached JS/CSS from being short-circuited when both share the site domain. - Remove the now-unnecessary assetLoaderDomain configuration option from EditorConfiguration. - Update AJAX documentation to reflect the simplified setup. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

nbradbury · 2026-03-30T19:50:12Z

@dcalhoun This is looking good, but I'm not sure about "Step 8: Verify the request relies upon the REST API, not admin-ajax." What exactly should I be looking for?

dcalhoun · 2026-03-30T21:21:06Z

@dcalhoun This is looking good, but I'm not sure about "Step 8: Verify the request relies upon the REST API, not admin-ajax." What exactly should I be looking for?

@nbradbury it references using Chrome to inspect the Network activity of the mobile device/emulator. When inspecting, the Network tab should show requests. Uploading a Video should result in fetch() requests to the REST API, not jQuery.ajax() requests to the admin-ajax.php path. This occurs because the VideoPress bridge remains in place, which converts certain AJAX actions to REST API requests.

Below is a screenshot of example admin-ajax.php (autosave) and REST API (Jetpack AI Assistant) requests from a Chrome browser session.

nbradbury · 2026-03-30T22:51:36Z

@dcalhoun Thanks for the clarification, looks all good to me! @kean Feel free to approve this after you test the iOS side.

kean

I tested the changes and verified that the "Authorization" header was present and that the existing upload media functionality is working. The code looks good.

dcalhoun added the [Type] Enhancement A suggestion for improvement. label Sep 19, 2025

dcalhoun force-pushed the feat/authorize-ajax-with-application-passwords branch from a051ea4 to 682e0df Compare September 19, 2025 20:00

dcalhoun changed the title ~~feat: Authorize AJAX with application passwords~~ feat: Authorize AJAX with token authentication Sep 24, 2025

This was referenced Sep 24, 2025

feat: Expand VideoPress support wordpress-mobile/WordPress-Android#22229

Closed

chore: Test GutenbergKit VideoPress wordpress-mobile/WordPress-iOS#24887

Closed

feat: Allow Android WebView admin-ajax.php CORS requests Automattic/jetpack#45292

Closed

dcalhoun changed the title ~~feat: Authorize AJAX with token authentication~~ feat: AJAX uses token authentication Sep 25, 2025

dcalhoun force-pushed the feat/authorize-ajax-with-application-passwords branch from 686ebf7 to bbaf9c4 Compare January 13, 2026 19:35

This comment was marked as outdated.

Sign in to view